<template>
  <div>
    <div :class="{'flexBlock-outer':true,'flexBlock-outer-action':isExpend}">
      <div :class="{'flexBlock-inner':true,'flexBlock-inner-action':isExpend}" ref='box'>
        <div class="flexBlock-inner-header">
          <van-icon v-if="!isExpend" class-prefix="aliIconfont" name="icon-arrow-t_fill" color="#fff" size="2.1875rem"/>
          <van-icon v-else class-prefix="aliIconfont" name="icon-arrow-b_fill" color="#fff" size="2.1875rem"/>
        </div>
        <div class="flexBlock-inner-body">
          <slot name="content"></slot>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Icon } from "vant";
export default{
  data(){
    return {
      isExpend:false
    }
  },
  methods:{
    slideFlexBox(){
      let startY = 0;
      let topY = 0;
      let that = this;
      this.$refs.box.addEventListener('touchstart',function(e){
        startY = e.targetTouches[0].pageY - this.offsetTop;
      })
      this.$refs.box.addEventListener('touchmove',function(e){
        topY = e.targetTouches[0].pageY - startY;
        let limitTop = (this.clientHeight - this.offsetParent.clientHeight - this.clientHeight * 0.2);
        topY < -limitTop ? topY = -limitTop : null;
        topY > 0 ? topY = 0 : null;
        this.style.top = topY + 'px';
        this.style.transitionProperty = 'border-radius';
      })
      this.$refs.box.addEventListener('touchend',function(){
        this.style.transitionProperty = 'top,border-radius';
        this.style.transitionDuration = '.5s'
        let totalHeight = this.clientHeight * 0.8 - this.offsetParent.clientHeight;
        if(-topY < totalHeight / 2){
          that.isExpend = false;
          that.$emit('setIsExpend',false)
        }else{
          that.isExpend = true;
          that.$emit('setIsExpend',true)
        }
        that.isExpend ? this.style.top = -totalHeight + "px" : this.style.top = 0;
      })
    }
  },
  mounted(){
    this.slideFlexBox();
  },
  components:{
    [Icon.name]:Icon
  }
}
</script>
<style lang="less">
.flexBlock-outer{
  width: 100%;
  height: 6.25rem;
  /* background: linear-gradient(0deg,#FFE7BA,#fff); */
  position: fixed;
  bottom: 3.125rem;
  left: 0;
  &::after{
    content: "";
    position: absolute;;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg,#FFE7BA,#FFE7BA);
    border-radius: 5% 5% 0% 0% / 100% 100% 0% 0%;
    transition-property: height,border-radius,background;
    transition-duration: .4s;
    z-index: -1;
  }
}
.flexBlock-outer-action{
  &::after{
    content: "";
    position: absolute;;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(0deg,#FFE7BA,#fff);
    border-radius: 0%;
    z-index: -1;
  }
}
.flexBlock-inner{
  width: 90%;
  height: 50vh;
  background: #fff;
  margin: auto;
  border-radius: 50% 50% 0% 0% / 15% 15% 0% 0%;
  transform: translate(-50%,-20%);
  overflow: hidden;
  position: absolute;
  top:0px;
  left: 50%;
  background: #FFE7BA;
  box-shadow: 0 10px 15px 3px rgba(0, 0, 0, 0.5);
  .flexBlock-inner-header{
    padding: .5rem 0;
  }
  
}
.flexBlock-inner-action{
  border-radius: 20px 20px 0 0
}
</style>